@charset "utf-8";

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#container {
  width: 1920px;
  height: 1080px;
  position: absolute;
  z-index: 10;

  .BMap_cpyCtrl,
  .anchorBL {
    display: none;
  }
}

.speed {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: space-around;
  z-index: 10;
}

.main {
  width: 1920px;
  height: 1080px;

  .bjimg {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
  }
}

.tableleft {
  left: -500px !important;
  // transition: left 2s !important;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 2s ease 0s !important;
  -moz-transition: width 2s;
  /* Firefox 4 */
  -webkit-transition: width 2s;
  /* Safari and Chrome */
  -o-transition: width 2s;
  /* Opera */

  .main-ImgLeft {
    position: absolute;
    top: 0;
    height: 1080px;
    // overflow: hidden;
    z-index: 10;
  }

  .surface-left {
    position: absolute;
    top: 80px;
    left: 38px;
    z-index: 10;

    .leftIconX,
    .leftIconY {
      position: absolute;
      top: 500px;
      left: 500px;
      cursor: pointer;
    }

    .left-one {
      position: relative;

      #Eleft_one {
        position: absolute;
        left: 20px;
        top: 25px;
      }

      .select {
        width: 100px;
        line-height: 30px;
        border-radius: 30px;
        position: absolute;
        top: 60px;
        left: 250px;
        z-index: 12;
        overflow: hidden;
      }
    }


    .left-two {
      position: relative;

      #Eleft_two {
        position: absolute;
        left: 20px;
        top: 30px;
      }
    }

    .left-three {
      position: relative;
      overflow: hidden;

      .Eleft_three {
        position: absolute;
        left: 20px;
        top: 25px;

        .three-title {
          color: #fff;
          font-size: 17px;
          position: absolute;
          left: 32px;
          top: -3px;
        }

        .threeBox {
          margin-top: 30px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;

          .three-one,
          .three-two,
          .three-three {
            margin-top: 20px;

            .oneBox {

              // position: absolute;
              // display: flex;
              // justify-content: space-between;
              // justify-content: flex-end;
              .oneBox-left {
                position: absolute;
                top: 65px;
                left: 5px;
              }

              .oneBox-right {
                position: absolute;
                top: 65px;
                left: 45px;

                .firstTop {
                  font: bold 25px/26px "微软雅黑";
                  color: #fe7272;
                  margin: 0;
                }

                .firstBottom {
                  color: #fe7272;
                  font-size: 12px;
                  margin: 0;
                }
              }
            }

            .twoBox {

              // position: absolute;
              // display: flex;
              // justify-content: space-between;
              // justify-content: flex-end;
              .twoBox-left {
                position: absolute;
                top: 65px;
                left: 150px;
              }

              .twoBox-right {
                position: absolute;
                top: 65px;
                left: 195px;

                .secondTop {
                  font: bold 25px/26px "微软雅黑";
                  color: #55ff9d;
                  margin: 0;
                }

                .secondBottom {
                  color: #55ff9d;
                  font-size: 12px;
                  margin: 0;
                }
              }
            }

            .threeBox {

              // position: absolute;
              // display: flex;
              // justify-content: space-between;
              // justify-content: flex-end;
              .threeBox-left {
                position: absolute;
                top: 65px;
                left: 285px;
              }

              .threeBox-right {
                position: absolute;
                top: 65px;
                left: 335px;

                .thirdTop {
                  font: bold 25px/26px "微软雅黑";
                  color: #ffcd43;
                  margin: 0;
                }

                .thirdBottom {
                  color: #ffcd43;
                  font-size: 12px;
                  margin: 0;
                }
              }
            }

          }

          .three-four,
          .three-five,
          .three-six {
            .fourBox {
              .fourBox-left {
                position: absolute;
                top: 175px;
                left: 285px;
              }

              .fourBox-right {
                position: absolute;
                top: 175px;
                left: 335px;

                .thirdTop {
                  font: bold 25px/26px "微软雅黑";
                  color: #ffcd43;
                  margin: 0;
                }

                .thirdBottom {
                  color: #ffcd43;
                  font-size: 12px;
                  margin: 0;
                }
              }
            }

            .fiveBox {
              .fiveBox-left {
                position: absolute;
                top: 175px;
                left: 150px;
              }

              .fiveBox-right {
                position: absolute;
                top: 175px;
                left: 195px;

                .secondTop {
                  font: bold 25px/26px "微软雅黑";
                  color: #55ff9d;
                  margin: 0;
                }

                .secondBottom {
                  color: #55ff9d;
                  font-size: 12px;
                  margin: 0;
                }
              }
            }

            .sixBox {
              .sixBox-left {
                position: absolute;
                top: 175px;
                left: 5px;
              }

              .sixBox-right {
                position: absolute;
                top: 175px;
                left: 45px;

                .firstTop {
                  font: bold 25px/26px "微软雅黑";
                  color: #fe7272;
                  margin: 0;
                }

                .firstBottom {
                  color: #fe7272;
                  font-size: 12px;
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}

.carNumber {
  background: #00bdff;
  border: 1px solid #1894ff;
}

.middle {
  width: 100%;
  height: 100%;

  .abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
  .serIpt {
    top: -503px !important;
  }

  .searchAll {
    position: absolute;
    z-index: 10;
    left: 400px;
    top: 0px;
    transition: all 2s ease 0s !important;
    -moz-transition: width 2s;
    /* Firefox 4 */
    -webkit-transition: width 2s;
    /* Safari and Chrome */
    -o-transition: width 2s;

    /* Opera */
    .el-input__inner {
      background-color: rgba(255, 255, 255, 0.247);
      color: #fff;
      display: flex;
      align-items: center;
    }

    .filter-tree {
      height: 460px;
      overflow: auto;
      background: #085d95;
      color: #fff;
      font-size: 25px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .el-tree-node__content:hover {
      background-color: #01aad4;
    }

    .el-tree-node:focus>.el-tree-node__content {
      background-color: #66b1ff87 !important;
    }


    .search-imgTop,
    .serch-imgBottom {
      position: absolute;
      top: 500px;
      left: 80px;
      z-index: 10;
      cursor: pointer;
    }
  }

  .eventEdit {
    width: 858px;
    height: 668px;
    background: url(../images/sjxqbj.png);
    background-size: 100% 100%;
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
  }

  .eventdetail {
    line-height: 5px;
    color: #00A2FF;
    align-items: center;
    display: flex;
  }

  .eventdetail p {
    color: #fff;
  }

  .eventimg {
    float: right;
    cursor: pointer;
  }

  .origin {
    right: 600px;
    bottom: 123px;
    position: absolute;
    z-index: 10;
    cursor: pointer;
  }

  .back {
    width: 80px;
    height: 40px;
    text-align: center;
    position: absolute;
    top: 20px;
    left: 50px;
    cursor: pointer;
    z-index: 10;
    background: #31d4ff;
    border-radius: 19px;

    .backText {
      line-height: 40px;
      font-size: 15px;
      color: #fff;
    }
  }

  // .hideLeft {
  //   width: 80px;
  //   height: 40px;
  //   text-align: center;
  //   position: absolute;
  //   top: 20px;
  //   left: 180px;
  //   cursor: pointer;
  //   z-index: 10;
  //   background: #31d4ff;
  //   border-radius: 19px;

  //   .hideText {
  //     line-height: 40px;
  //     font-size: 15px;
  //     color: #fff;
  //   }
  // }

  // .hideright {
  //   width: 80px;
  //   height: 40px;
  //   text-align: center;
  //   position: absolute;
  //   top: 20px;
  //   right: 180px;
  //   cursor: pointer;
  //   z-index: 11;
  //   background: #31d4ff;
  //   border-radius: 19px;

  //   .hideText {
  //     line-height: 40px;
  //     font-size: 15px;
  //     color: #fff;
  //   }
  // }


  .Carlushu {
    position: absolute;
    top: 20%;
    right: 25%;
    // right: 40px;
    transform: translateY(-50%);
    z-index: 99;

    display: flex;
    flex-direction: column;

    #run {
      border-radius: 10px;
      background: #00948c;
      color: #fff;
    }

    #pause {
      border-radius: 10px;
      background: #ffbd00;
      color: #fff;
    }

    #stop {
      border-radius: 10px;
      background: #909399;
      color: #fff;
    }

    #deleteTrajectory {
      border-radius: 10px;
      background: #ff5221;
      color: #fff;

    }

    li {
      display: flex;
      align-items: center;
      list-style: none;
      padding: 5px 10px;
      background: #fff;
      border-radius: 4px;
      text-align: center;
      margin: 5px 0;
      cursor: pointer;
    }

  }

  .peolushu {
    position: absolute;
    top: 20%;
    right: 25%;
    // right: 40px;
    transform: translateY(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;

    #peoRun {
      border-radius: 10px;
      background: #00948c;
      color: #fff;
    }

    #peoPause {
      border-radius: 10px;
      background: #ffbd00;
      color: #fff;
    }

    #peoStop {
      border-radius: 10px;
      background: #909399;
      color: #fff;
    }

    #peoDeleteTrajectory {
      border-radius: 10px;
      background: #ff5221;
      color: #fff;

    }

    li {
      display: flex;
      align-items: center;
      list-style: none;
      padding: 5px 10px;
      background: #fff;
      border-radius: 4px;
      text-align: center;
      margin: 5px 0;
      cursor: pointer;
    }
  }

  .small-window {
    position: absolute;
    z-index: 12;
    top: 367px;
    left: 888px;
  }

  .indicator {
    width: 384px;
    height: 46px;
    position: absolute;
    top: 809px;
    left: 659px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 10;
  }

  .bigIndicator {

    width: 585px;
    height: 51px;
    position: absolute;
    bottom: 123px;
    left: 659px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 10;

    #car,
    #personnel,
    #led,
    #monitor,
    #event,
    #material,
    #construction,
    #StakeNumber {
      cursor: pointer;
    }
  }

  .text {

    height: 47px;
    width: 610px;
    position: absolute;
    bottom: 85px;
    left: 648px;
    color: #fff;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
  }
}

.tableright {
  right: -500px !important;
}

.right {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 2s ease 0s !important;
  -moz-transition: width 2s;
  /* Firefox 4 */
  -webkit-transition: width 2s;
  /* Safari and Chrome */
  -o-transition: width 2s;
  /* Opera */

  .main-ImgRight {
    // overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    height: 1080px;
    z-index: 10;
  }

  .surface-right {
    position: absolute;
    top: 80px;
    right: 36px;
    z-index: 10;

    .rightIconX,
    .rightIconY {
      position: absolute;
      top: 500px;
      right: 500px;
      cursor: pointer;
    }

    .right-one {
      .oneBox {
        position: absolute;
        top: 0;
        right: 15px;

        .box-title {
          margin-top: 20px;
          margin-left: 30px;
          color: #fff;
          font-size: 17px;
          left: 32px;
        }

        .boxbgd {
          margin-top: 20px;
          margin-left: 10px;
          color: #fff;



          .box {
            display: flex;
            position: absolute;
            flex-wrap: wrap;
            top: 65px;
            height: 220px;
            overflow: auto;

            .boxevent:nth-child(even) {
              width: 376px;
              background: rgba(60, 102, 128, 0.6);
            }

            .boxevent {
              height: 73px;
              overflow: auto;
              width: 376px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;

              .event-add-content {
                width: 300px;
                // color: #00A2FF;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .box-left {
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                span {
                  padding: 3px;
                }
              }

              .box-right {
                margin-right: 10px;
                display: flex;
                align-items: center;
                // .col0{
                //   color: red;
                // }
              }
            }
          }

        }
      }
    }

    .right-two {
      position: relative;

      #Eright_two {
        position: absolute;
        top: 0;
      }

    }

    .right-three {
      overflow: hidden;
      position: relative;

      .threeBox {
        position: absolute;
        top: 25px;
        right: 25px;

        .box-title {
          // margin-top: 20px;
          margin-left: 30px;
          color: #fff;
          font-size: 17px;
          left: 32px;
        }

        .box-video {
          margin-top: 20px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-around;

          .videoStyle {

            background: url('../images/video_bg.png')no-repeat;
          }
        }
      }
    }
  }
}

// 人员弹窗
#peoBox {
  width: 380px;
  border: 1px solid #06234b;
  background: #154572;
  color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 20px;

  #picture {
    position: absolute;
    left: 160px;
    top: 3px;
    display: flex;

    img {
      border-radius: 50%;
    }
  }
}


// 车辆弹窗
#carBox,
#peoBox,
#ledBox {
  width: 380px;
  border: 1px solid #06234b;
  background: #154572;
  color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 20px;


  #carNumber,
  #carTime,
  #carPosition {
    font-size: 20px;
  }

  #functions {
    padding: 20px 10px;
    display: flex;
    justify-content: space-around;
  }

  #trajectory,
  #video,
  #call {

    width: 48px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
  }
}

// 监控弹窗
.MonitoringSty {
  width: 379px;
  height: 200px;
  background: url(../images/jk/jkk.png);
  border: '1px solid transparent';
  padding: 10px 10px;
}

.monbacking {
  width: 379px;
  height: 359px;
  background: url(../images/jk/jkbj.png) !important;
  padding: 10px 10px;
}

.monbackingss {
  width: 379px;
  height: 459px;
  background: url(../images/jk/jkbjss.png) no-repeat !important;
  padding: 10px 10px;
}

.controlVideo {
  width: 120px;
  height: 120px;
  background: url(../images/jk/ypvideo.png);
  background-size: 100% 100%;
  margin-left: 30px;

  position: relative;
  left: 50%;
  transform: translateX(-76%);
  z-index: 9999;
}

.controlVideo p {
  cursor: pointer;
}

.yxtop {
  width: 23px;
  height: 12px;
  background: url(../images/jk/yxtop.png);
  background-size: 100% 100%;
  position: absolute;
  top: 9px;
  left: 34px;
}

.yxbottom {
  width: 23px;
  height: 12px;
  background: url(../images/jk/yxbottom.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: 9px;
  left: 34px;
}

.yxleft {
  width: 12px;
  height: 23px;
  background: url(../images/jk/yxleft.png);
  background-size: 100% 100%;
  position: absolute;
  left: -6px;
  top: 48px;
}

.yxright {
  width: 12px;
  height: 23px;
  background: url(../images/jk/yxright.png);
  background-size: 100% 100%;
  position: absolute;
  right: -6px;
  top: 48px;
}

.yxtl {
  width: 16px;
  height: 18px;
  background: url(../images/jk/yxtl.png);
  background-size: 100% 100%;
  position: absolute;
  left: 7px;
  top: 21px;
}

.yxtr {
  width: 16px;
  height: 18px;
  background: url(../images/jk/yxtr.png);
  background-size: 100% 100%;
  position: absolute;
  right: 6px;
  top: 23px;
}

.yxbl {
  width: 16px;
  height: 18px;
  background: url(../images/jk/yxbl.png);
  background-size: 100% 100%;
  position: absolute;
  left: 7px;
  bottom: 21px;
}

.yxbr {
  width: 16px;
  height: 18px;
  background: url(../images/jk/yxbr.png);
  background-size: 100% 100%;
  position: absolute;
  right: 6px;
  bottom: 20px;
}

.CameraVariation {
  width: 300px;
  height: 120px;
  position: absolute;
  left: 35px;
  bottom: -4px;

  display: flex;
  justify-content: space-between;
}

.CameraVariation_big {
  width: 50px;
  height: 50px;
  background: url(../images/jk/CameraVariation.png);
  background-size: 100% 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.CameraVariation_small {
  width: 50px;
  height: 50px;
  background: url(../images/jk/CameraVariation.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.MonitoringSty-title {
  font-size: 20px;
  margin: 15px 0 0 15px;
  color: #00A2FF;
}

.MonitoringSty p {
  margin: 0 15px;
  color: #fff;
}

.MonitoringSty-video {
  width: 329px;
  height: 203px;
  background: url(../images/jk/video.png);

  margin: 15px 15px;
}

.MonitoringSty span {
  color: #fff;
  margin-left: 15px;
}

/* 推送事件 */
.MonitoringStyEvent {
  width: 705px;
  height: 353px;
  background: url(../images/event.png);
  background-size: 100% 100%;
  border: '1px solid transparent';
  padding: 10px 10px;

  .MonitoringStyEvent-title {
    font-size: 20px;
    margin: 10px 0 0 10px;
    color: #00A2FF;
  }

  .MonitoringStyEvent-content {
    width: 657px;
    height: 260px;
    background: url(../images/event-content.png);
    margin: 10px auto;
    position: relative;
    padding: 5px 10px;

    .MonitoringStyEvent-text {
      height: 40px;
      width: 46%;
      color: #00A2FF;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      // line-height: 35px;
      span {
        display: inline-block;
        width: 65px;
        text-align: justify;
        text-justify: distribute-all-lines;
        /*ie6-8*/
        text-align-last: justify;
        /* ie9*/
        -moz-text-align-last: justify;
        /*ff*/
        -webkit-text-align-last: justify;
        /*chrome 20+*/
      }

      p {
        width: 180px;
        color: #fff;
        margin-left: 10px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .MonitoringStyEvent-img {
      width: 331px;
      height: 241px;
      border: 1px solid #00A2FF;
      color: #fafafa;

      position: absolute;
      top: 10px;
      right: 10px;
    }

    .EventDetails {
      width: 60px;
      padding: 4px 0;
      color: #fff;
      border: 1px solid #00A2FF;
      border-radius: 4px;
      text-align: center;
      margin-top: 5px;
      cursor: pointer;
    }
  }
}

/* PC端手机端滚动条优化 */
.ele_new_left_good::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
}

.ele_new_left_good::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: #c5c5c5 !important;
  transition: 0.5s all;
}

.ele_new_left_good::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #c5c5c5 !important;
  transition: 0.5s all;
}

.ele_new_left_good::-webkit-scrollbar-track-piece {
  background-color: #fafafa !important;
  -webkit-border-radius: 0px;
}

.ele_new_left_good::-webkit-scrollbar-thumb:vertical {
  height: 1px;
  background-color: #d9d9d9 !important;
  -webkit-border-radius: 0px !important;
}

.ele_new_left_good::-webkit-scrollbar-thumb:horizontal {
  width: 4px;
  background-color: #d9d9d9 !important;
  -webkit-border-radius: 0px !important;
}

#peoBox {
  .picture {
    position: relative;
  }
}
